<!--父级页面：控制除登录页以外所有页面共有的头部与左侧菜单栏-->
<template>
    <div style="display: flex">
        <div :style="{width:(isCollapse?'64px':'208px')}" >
            <!--左侧菜单栏-->
            <el-menu background-color="#3c82f5"
                    style="width: 100%;height: 100vh;
                    color: #fff;"
                    active-text-color="#ff0"
                     :collapse="isCollapse"
                     :collapse-transition="false"
                     unique-opened
                     router
                     @select="selectMenu"
            >
                <el-row style="padding-top: 10px">
                    <el-col :span="2"></el-col>
                    <el-col :span="5" style="padding-left: 9px">
                        <el-avatar src="/imgs/admin/logo.png" style="width: 35px;height: 35px;"></el-avatar>
                    </el-col>
                    <el-col :span="isCollapse? 0 : 13 " ><router-link to="/" style="text-decoration: none;font-weight: bold; color: #fff;position: relative;top: 8px;left: 2px;">智慧车辆</router-link></el-col>
                </el-row>
                
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon style="font-size: 21px"><User/></el-icon><span>用户管理</span>
                    </template>
                    <el-menu-item index="/user">用户列表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon style="font-size: 21px"><Van/></el-icon><span>车辆管理</span>
                    </template>
                    <el-menu-item index="/vehicle">车辆列表</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon style="font-size: 21px"><Location/></el-icon><span>电子围栏</span>
                    </template>
                    <el-menu-item index="/geofence">围栏管理</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon style="font-size: 21px"><Place/></el-icon><span>调度管理</span>
                    </template>
                    <el-menu-item index="/application">申请列表</el-menu-item>
                    <el-menu-item index="/audit">调度审核</el-menu-item>
                    <el-menu-item index="/distribute">车辆分配</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon style="font-size: 21px"><MessageBox/></el-icon><span>数据字典</span>
                    </template>
                    <el-menu-item index="/dict">字典管理</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
        <div :style="{width:(isCollapse?'calc(100% - 64px)':'calc(100% - 208px)')}"  >
            <!--右侧顶部栏-->
            <el-header style="background-color: #fff;height: 10vh; padding-left: 0;">
<!--                折叠图标与登录名-->
                <el-row :gutter="10" style="position: relative">
                    <el-col :span="18" style="font-size: 20px; cursor: pointer" @click="changeCollapsed"><el-icon><Expand/></el-icon></el-col>
                    <el-col :span="6" style="position: absolute;right: 20px;">
                            <el-dropdown trigger="click">
                                <span style="font-size: 19px;font-weight: bold;">
                                  {{user.username}}
                                  <el-icon><arrow-down /></el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                    </el-col>
                </el-row>
<!--                面包屑导航-->
                <el-breadcrumb separator="/" style="position: relative;top: 20px;">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="it in breadarr" >{{it}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <!--右侧主体内容-->
            <el-main style="height: 90vh;padding: 0;">
<!--                可变区域中的内容需要在各个子组件里写！-->
                <router-view/>
            </el-main>
        </div>
    </div>
</template>

<script setup>
    import {ref} from "vue";
    import {ElMessage, ElMessageBox} from "element-plus";
    import router from "@/router";
    
    const isCollapse=ref(false);
    
    const changeCollapsed=()=>{
        isCollapse.value=!isCollapse.value;
    }
    
    const user=ref(getUser())
    const logout=()=>{
        ElMessageBox.confirm('是否要退出登录？',
            '提示',{
                confirmButtonText:"确认",
                cancelButtonText:"取消",
                type:"warning"
            }
        ).then(()=>{
            localStorage.removeItem("user");
            localStorage.removeItem("bread")
            location.href='/login'
            ElMessage.success("退出登录成功！")
        }).catch(()=>{
            ElMessage.success("已取消！")
        })
    }
    
    let map={
        "/user":["用户管理","用户列表"],
        "/vehicle":["车辆管理","车辆列表"],
        "/geofence":["电子围栏","围栏管理"],
        "/application":["调度管理","申请列表"],
        "/audit":["调度管理","调度审核"],
        "/distribute":["调度管理","车辆分配"],
        "/dict":["数据字典","字典管理"],
    }
     const breadarr=ref(JSON.parse(localStorage.getItem('bread'))||map['/user']);
  /*  router.afterEach((to, from) => {
        // 在路由切换之后执行的逻辑
        console.log('路由已经从', from.path, '切换到', to.path);
        arr.value=map[getbre()]
    });*/
    const selectMenu=(index)=>{
        breadarr.value=map[index]
        localStorage.setItem("bread",JSON.stringify(breadarr.value))
    }
    
    
</script>
